<template>
	<view class="revise">
		<view class="header">

		</view>
		<!-- 选择 -->
		<view class="select">
			<!-- 性别 -->
			<view class="uni-list sex">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						性别
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">
								<view v-if="index" class="">
									{{array[index]}}
								</view>
								<view v-else class="beforeselect">
									请选择性别
								</view>
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png">
								</image>
							</view>

						</picker>
					</view>
				</view>
			</view>
			<!-- 选择年月 -->
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						出生年月
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" placeholder="出生年月" :end="endDate"
							@change="bindDateChange">
							<view class="uni-input">
								<view v-if="date" class="">
									{{date}}
								</view>
								<view v-else class="beforeselect">
									请选择出生年月
								</view>
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png">
								</image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 最高学历 -->
			<view class="uni-list sex">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						最高学历
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindXLChange" :value="xlIndex" :range="xueliList">
							<view class="uni-input">
								<view v-if="xlIndex" class="">
									{{xueliList[xlIndex]}}
								</view>
								<view v-else class="beforeselect">
									请选择学历
								</view>
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png">
								</image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- 省市 -->
			<view class="uni-lists nbord">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						所在省市
					</view>
					<view class="uni-list-cell-db">
						<!-- <picker @change="bindXLChange" :value="xlIndex" :range="xueliList">
							<view class="uni-input">
								{{xueliList[xlIndex]}}
								<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png"></image>
							</view>
						</picker> -->

						<biaofun-city v-model="defaultValue" @change="onChangeRegion"></biaofun-city>
						<image class="jiantou" src="https://wlsy.nanjingyunpeng.cn/weixin/image/iconLeft.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<button class="btn" @click="$u.debounce(subMessage, 500)">保存编辑</button>
		</view>
		<view class="footer">
			<image class="footerimg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/footerImg.png"></image>
		</view>
	</view>
</template>

<script>
	import biaofunCity from "@/components/biaofun-city2.vue";
	import {
		edituserinfo
	} from "../../api/api.js"
	export default {
		components: {
			biaofunCity,
		},
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			return {
				array: ['保密', '男', '女'],
				index: "",
				xueliList: ['小学', '初中', '高中', '中专','大专', '本科', '硕士','博士'],
				xlIndex: "",
				date: "",
				defaultValue: null,
				address: "",
			}
		},
		onLoad() {

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			onChangeRegion(e) {
				this.address = e[0].name + '-' + e[1].name
				// console.log("22",e,this.address)
			},


			upload() {


			},
			//性别
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			//学历
			bindXLChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.xlIndex = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async subMessage() {
				const data = {
					gender: this.array[this.index],
					birthday: this.date,
					school_record: this.xueliList[this.xlIndex],
					province: this.address

				}
				let res = await edituserinfo(data)
				if (res.code == 1000) {
					uni.showToast({
						title: '保存成功',
						duration: 2000,
						icon: "none",
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home',
							  success(){
									 let page = getCurrentPages().pop();  //跳转页面成功之后
							             if (!page) return;  
							             page.onLoad(); //如果页面存在，则重新刷新页面
								  }
						});
					}, 1000)

				}

			}

		}
	}
</script>

<style scoped lang="scss">
	.revise {
		.header {
			width: 750rpx;
			height: 40rpx;
			background: #466EE7;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: fixed;
			top: 0;
			left: 0;
		}

		min-height: 100%;
		background-color: #EEF7FE;
		padding: 30rpx;
		padding-top: 70rpx;
		box-sizing: border-box;

		.select {
			width: 690rpx;
			height: 473rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 8rpx 0px rgba(51, 51, 51, 0.05);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding: 0 20rpx;
			box-sizing: border-box;

			.uni-lists {
				width: 670rpx;
				height: 116rpx;
				ertical-align: middle;
				line-height: 116rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				position: relative;

				.uni-list-cell-db {
					display: flex;
					align-items: center;
				}

				.uni-input {
					display: flex;
					align-items: center;
				}

				.uni-list-cell {
					display: flex;
					justify-content: space-between;
				}

				.jiantou {
					width: 48rpx;
					height: 48rpx;

				}
			}

			.uni-list {
				width: 670rpx;
				height: 116rpx;
				border-bottom: 1px solid #EEEEEE;
				ertical-align: middle;
				line-height: 116rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				position: relative;

				.nbord {
					border-bottom: #FFFFFF;
				}

				.nickname {
					margin-top: 33rpx;
					position: relative;
					width: 200rpx;
					// background-color: pink;
				}

				.uni-list-cell-db {
					display: flex;
					align-items: center;
				}

				.uni-input {
					display: flex;
					align-items: center;

					.beforeselect {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 33rpx;
					}
				}

				.uni-list-cell {
					display: flex;
					justify-content: space-between;
				}

				.jiantou {
					width: 48rpx;
					height: 48rpx;

				}

				.touxiang {
					width: 60rpx;
					height: 60rpx;
				}

				.nobord {
					border-bottom: 0px solid #EEEEEE;
				}
			}

		}

		.submit {
			position: absolute;
			bottom: 100rpx;
			z-index: 99;

			.btn {
				width: 690rpx;
				height: 88rpx;
				background: linear-gradient(1deg, #688EFA 0%, #466EE7 100%);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 88rpx;
			}
		}

		.footer {
			width: 750rpx;
			height: 324rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.footerimg {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
